import React, { useState } from 'react';
import BoxItem from '../../../components/BoxItem';
import BorderTable from '../components/BorderTable';

import { Button, DatePicker, Form, Input, Select } from 'antd';

const { RangePicker } = DatePicker;

export default function InventoryFlow() {
	const columns = [
		{ title: '商品编码', dataIndex: 'productId', key: 'productId' },
		{ title: '商品名称', dataIndex: 'productName', key: 'productName' },
		{ title: '关联业务', dataIndex: 'specification', key: 'specification' },
		{ title: '仓库', dataIndex: 'warehouse', key: 'warehouse' },
		{ title: '往来单位', dataIndex: 'contactUnit', key: 'contactUnit' },
		{ title: '变动类型', dataIndex: 'changeType', key: 'changeType' },
		{ title: '变动时间', dataIndex: 'changeTime', key: 'changeTime' },
		{ title: '出库量', dataIndex: 'outQuantity', key: 'outQuantity' },
		{ title: '入库量', dataIndex: 'inQuantity', key: 'inQuantity' }
	];

	const dataSource = [
		{
			key: '1',
			productId: 'P001',
			productName: '商品A',
			specification: '规格A',
			warehouse: '仓库1',
			contactUnit: '单位1',
			changeType: '出库',
			changeTime: '2024-11-01 10:00:00',
			outQuantity: 50,
			inQuantity: 0
		},
		{
			key: '2',
			productId: 'P002',
			productName: '商品B',
			specification: '规格B',
			warehouse: '仓库2',
			contactUnit: '单位2',
			changeType: '入库',
			changeTime: '2024-11-02 11:00:00',
			outQuantity: 0,
			inQuantity: 100
		},
		{
			key: '3',
			productId: 'P003',
			productName: '商品C',
			specification: '规格C',
			warehouse: '仓库1',
			contactUnit: '单位3',
			changeType: '出库',
			changeTime: '2024-11-03 12:30:00',
			outQuantity: 30,
			inQuantity: 0
		},
		{
			key: '4',
			productId: 'P004',
			productName: '商品D',
			specification: '规格D',
			warehouse: '仓库3',
			contactUnit: '单位4',
			changeType: '入库',
			changeTime: '2024-11-04 14:45:00',
			outQuantity: 0,
			inQuantity: 200
		},
		{
			key: '5',
			productId: 'P005',
			productName: '商品E',
			specification: '规格E',
			warehouse: '仓库2',
			contactUnit: '单位5',
			changeType: '出库',
			changeTime: '2024-11-05 16:00:00',
			outQuantity: 120,
			inQuantity: 0
		},
		{
			key: '6',
			productId: 'P006',
			productName: '商品F',
			specification: '规格F',
			warehouse: '仓库1',
			contactUnit: '单位6',
			changeType: '入库',
			changeTime: '2024-11-06 09:00:00',
			outQuantity: 0,
			inQuantity: 50
		},
		{
			key: '7',
			productId: 'P007',
			productName: '商品G',
			specification: '规格G',
			warehouse: '仓库3',
			contactUnit: '单位7',
			changeType: '出库',
			changeTime: '2024-11-07 13:30:00',
			outQuantity: 80,
			inQuantity: 0
		},
		{
			key: '8',
			productId: 'P008',
			productName: '商品H',
			specification: '规格H',
			warehouse: '仓库2',
			contactUnit: '单位8',
			changeType: '入库',
			changeTime: '2024-11-08 15:00:00',
			outQuantity: 0,
			inQuantity: 150
		},
		{
			key: '9',
			productId: 'P009',
			productName: '商品I',
			specification: '规格I',
			warehouse: '仓库1',
			contactUnit: '单位9',
			changeType: '出库',
			changeTime: '2024-11-09 10:30:00',
			outQuantity: 60,
			inQuantity: 0
		},
		{
			key: '10',
			productId: 'P010',
			productName: '商品J',
			specification: '规格J',
			warehouse: '仓库3',
			contactUnit: '单位10',
			changeType: '入库',
			changeTime: '2024-11-10 11:15:00',
			outQuantity: 0,
			inQuantity: 300
		}
	];

	return (
		<div>
			<BoxItem>
				<Button size="large">导出</Button>
			</BoxItem>
			<BoxItem>
				<Form
					layout="inline" // 使用 inline 布局使所有字段并排显示
					style={{ maxWidth: '100%' }}
				>
					<Form.Item label="单据类型" style={{ width: '210px' }} wrapperCol={{ span: 15 }}>
						<Select defaultValue="请选择">
							<Select.Option value="仓库A">仓库A</Select.Option>
							<Select.Option value="仓库B">仓库B</Select.Option>
							<Select.Option value="仓库C">仓库C</Select.Option>
							<Select.Option value="仓库D">仓库D</Select.Option>
							<Select.Option value="仓库E">仓库E</Select.Option>
						</Select>
					</Form.Item>
					<Form.Item label="仓库" style={{ width: '210px' }} wrapperCol={{ span: 15 }}>
						<Select defaultValue="请选择">
							<Select.Option value="仓库A">仓库A</Select.Option>
							<Select.Option value="仓库B">仓库B</Select.Option>
							<Select.Option value="仓库C">仓库C</Select.Option>
							<Select.Option value="仓库D">仓库D</Select.Option>
							<Select.Option value="仓库E">仓库E</Select.Option>
						</Select>
					</Form.Item>
					<Form.Item label="变动时间" style={{ width: '400px' }} wrapperCol={{ span: 20 }}>
						<RangePicker />
					</Form.Item>
					<Form.Item style={{ width: '200px' }} wrapperCol={{ span: 20 }}>
						<Input placeholder="请输入关键词" />
					</Form.Item>
					<Form.Item style={{ marginTop: '20px' }}>
						<Button type="primary" style={{ marginRight: '20px', marginLeft: '890px' }}>
							搜索
						</Button>
						<Button>重置</Button>
					</Form.Item>
				</Form>
			</BoxItem>

			<BoxItem>
				<BorderTable columns={columns} dataSource={dataSource} />
			</BoxItem>
		</div>
	);
}
